<template>
  <div id="main">
    <el-form :inline="true" :model="queryData">
      <el-form-item clearable label="日期">
        <el-date-picker v-model="queryData.date" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="设备状态">
        <el-select clearable v-model="queryData.isOutOf" placeholder="请选择状态">
          <el-option
            v-for="item in repairIsOutOfOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="greenButton" @click="onQuery">查询</el-button>
        <el-button type="primary" class="greenButton" @click="reset()">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right;">
          <el-button type="primary" class="greenButton" @click="dleMany()">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table
      border
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      style="width: 100%;border:1px solid #00BDAC;"
        height="78%"
      :data="repairSumList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      :header-cell-style="{borderRight:'none',backgroundColor:'#00BDAC',color:'#FFFFFF'}"
    >
      <el-table-column
      type="selection"
      width="55">
      </el-table-column>
      <el-table-column align="center" type="index" :index="table_index" label="序号" width="50px"></el-table-column>
      <el-table-column align="center" prop="update_time" label="维修时间" width="180px"></el-table-column>
      <el-table-column align="center" prop="repair_person" label="维修人" width="80px"></el-table-column>
      <el-table-column align="center" prop="eq_model" label="设备编号" width="150px"></el-table-column>
      <el-table-column align="center" prop="maintenance" label="维保状态" width="80px"></el-table-column>
      <el-table-column align="center" prop="eq_floor_address" label="设备位置" width="150px"></el-table-column>
      <el-table-column align="center" prop="eq_name" label="设备名称"></el-table-column>
      <el-table-column align="center" prop="reapir_cost" label="维修金额"></el-table-column>
      <el-table-column align="center" prop="repairStatus" label="维修结果">
        <template slot-scope="scope">
          <span :class="scope.row.status === '未完成'?'active':''">{{scope.row.status}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="repair_eq_status1" label="设备情况" width="150px"></el-table-column>
      <el-table-column align="center" label="操作" width="150px">
        <template slot-scope="scope">
            <el-button
              size="mini"
              class="greenButton"
              style="border: none"
              :style="{backgroundColor:'#FB1C89'}"
              @click="deleteClick(scope.row)"
            >删除</el-button>
          </template>
      </el-table-column>
    </el-table>

    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        layout="total,prev, pager, next, jumper"
        :total="repairSumList.length"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>

      <el-button class="greenButton" @click="daochu" type="primary">导出/下载</el-button>
    </div>

  </div>
</template>

<script>
import DayJs from 'dayjs';
export default {
  data: function() {
    return {
      queryData: {
        date: "",
        isOutOf: ""
      },

      repairIsOutOfOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "正常"
        },
        {
          value: "0",
          label: "报废"
        }
      ],

      nameOptions: [
        {
          value: "1",
          label: "打印机"
        },
        {
          value: "2",
          label: "台式电脑"
        }
      ],

      repairSumList: [],

      currentPage: 1,
      pagesize:10,
      isShowDetail: false,

      detailTable: [
        {
          person: "张三",
          order: "100000",
          name: "打印机",
          location: "1号楼5层103",
          time: "2天",
          finishDate: "12.7",
          material: "红色墨盒 黑色墨盒",
          materialNum:"2盒",
          costMoney:'￥200'
        }
      ],

      isShowDispatch: false,

      editFormData: {
        date: "",
        person: "",
        route: "",
        tips: ""
      },

      personList: ["张三", "李四", "王五"],

      routeList: [
        {
          value: "1",
          label: "一号线"
        },
        {
          value: "2",
          label: "二号线"
        },
        {
          value: "3",
          label: "三号线"
        },
        {
          value: "4",
          label: "四号线"
        }
      ],
      multipleSelection:[],
    };
  },
  mounted(){
    this.huoqu();
  },
  methods: {
    dleMany(){
      console.log(this.multipleSelection)
      if(this.multipleSelection.length==0){
        return this.$message.error('请选择您要删除的信息')
      }
      const arr = []
      this.multipleSelection.forEach((item)=>{
          arr.push(item.id)
      })
      console.log(arr.join(','))
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let parme = {
                id:arr.join(',')
              }
              console.log(parme)
              this.ajaxCommon.ajax({
                    url: 'piliangequipmentdelete',
                    data:parme,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:'2000'
                          });
                          this.huoqu();
                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });

                      }
                     
                    }
                });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
    },
    handleSelectionChange(selection){
        console.log(selection)
        this.multipleSelection = selection
    },
    deleteClick(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             let parme = {
                ids:row.id
              }
       this.ajaxCommon.ajax({
                    url: 'summaryDelete',
                    data:parme,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:'2000'
                          });
                          this.huoqu();

                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });

                      }
                     
                    }
                });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    reset(){
      this.queryData.date = ''
      this.queryData.isOutOf = ''
      this.onQuery()
    },
    table_index(index){
        return (this.currentPage -1) * this.pagesize + index + 1
    },  
    daochu(){
      window.location.href="http://hqgj.heweixiao.cn/export_repair_list"
    },
    huoqu(){
     this.ajaxCommon.ajax({
                    url: 'repairlist',
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.repairSumList = res.data;
                      }
                     
                    }
                });
    },
    onQuery() {
      console.log(this.queryData);
      if(!this.queryData.date && !this.queryData.isOutOf){
          this.huoqu();
      }else{
        if(this.queryData.date && !this.queryData.isOutOf){
            let param = {
           data:DayJs(this.queryData.date).format('YYYY-MM-DD')
      }
       this.ajaxCommon.ajax({
                    url: 'repairlist',
                    data:param,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.repairSumList = res.data;
                      }else{
                        this.repairSumList = [];
                      }
                     
                    }
                });
        }
        if(!this.queryData.date && this.queryData.isOutOf){
            let param = {
           status:this.queryData.isOutOf
      }
       this.ajaxCommon.ajax({
                    url: 'repairlist',
                    data:param,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.repairSumList = res.data;
                      }else{
                        this.repairSumList = [];
                      }
                     
                    }
                });
        }
         if(this.queryData.date && this.queryData.isOutOf){
            let param = {
           data:DayJs(this.queryData.date).format('YYYY-MM-DD'),
           status:this.queryData.isOutOf
      }
       this.ajaxCommon.ajax({
                    url: 'repairlist',
                    data:param,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.repairSumList = res.data;
                      }else{
                        this.repairSumList = [];
                      }
                     
                    }
                });
        }
     
     
          }
    },
    onDetailclick(row) {
      this.isShowDetail = true;
      console.log(row);
    },
    handleRemind(row) {
      console.log(row);
    },
    handleDispatch(row) {
      this.isShowDispatch = true;
      console.log(row);
    },
    handleCancel(row) {
      console.log(row);
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    submit(){
      this.isShowDispatch = false;
    }
  }
};
</script>

<style lang="less" scoped>
  .active{
    color: #FB1C89;
  }
#main {
  width: 100%;
}

a {
  color: #00bdac;
  text-decoration: none;
}

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.edit-dialog-title {
  color: #ffffff;
  padding-left: 30px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  background: #00bdac;
}

.edit-form {
  width: 530px;
}

.message-button {
  text-align: right;
}
</style>

<style lang="less">
.detail-dialog {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 0;
    height: 410px;
  }
}

.edit-dialog {
  .el-dialog__header {
    padding: 0;
  }
}
</style>
